<template>
    <div style="height: 100%;padding: 20px;">
        <div class="item" style="display: flex;flex-direction: row;">
            <label>称谓<label style="color: red;">*</label></label>
            <div class="sex-item">
                <input type="radio" name="sex" :checked="user.sex===0">女士
                <input type="radio" name="sex" :checked="user.sex===1">男士
            </div>
        </div>
        <div class="item_flex">
            <div class="item">
                <label>姓名<label style="color: red;">*</label></label>
                <div class="grey_item">{{ user.username }}</div>
            </div>
            <div class="item">
                <label>生日<label style="color: red;">*</label></label>
                <div class="birthday">
                    <el-date-picker
                    v-model="value2"
                    type="dates"
                    placeholder="请选择生日日期"
                    />
                </div>
            </div>
            <div class="item">
                <label>你的手机<label style="color: red;">*</label></label>
                <div class="grey_item" style="background-color: #bbb;color: #fff;">{{ user.phone }}</div>
            </div>
            <div class="item">
                <label>短信验证码<label style="color: red;">*</label></label>
                <div class="code_item">
                    <input type="text" v-model="code">
                    <button>获取短信验证码</button>
                </div>
            </div>
        </div>
        <div class="ft-item">
            <div>
                <input type="checkbox" v-model="agree">同意依照本使用条款和隐私政策对我的个人信息进行收集和使用;我已阅读并确认被给予充分机会理解该使用条款和隐私政策的内容。
            </div>
            <div>
                <button @click="submitAndSave">确定并保存</button>
                <button @click="modifyPassword">修改密码</button>
            </div>
        </div>
    </div>
</template>

<script>
import { ElConfigProvider } from 'element-plus';
export default {
    data(){
        return{
            agree:false,
            code:''
        }
    },
    components:{
        ElConfigProvider
    },
    computed:{
        user(){
            return JSON.parse(localStorage.getItem('user'))
        }
    }
}
</script>

<style>
.item{
    padding: 10px;
}
.item>label{
    padding: 0 10px;
}
.grey_item{
    border: 1px solid #bbb;
    padding: 10px;
    color: #bbb;
    margin: 10px 7px;
}
.item_flex{
    display: grid;
    grid-template-columns: repeat(2,1fr);
}
.code_item,.birthday{
    height: 40px;
    margin: 10px 0;
}
.birthday{
    display: flex;
    align-items: center;
}
.code_item input,.code_item button{
    height: 100%;
}
.code_item button{
    margin: 0 10px;
    color: #fff;
    background-color: black;
}
.ft-item{
    margin: 20px 0;
}
.ft-item>div{
    margin: 10px 10px;
}
.ft-item button{
    border: 1px solid;
    height: 50px;
    padding:0 30px;
    margin: 10px;
    background-color: #fff;
}
.ft-item button:first-child{
    background-color: black;
    color: #fff;
}

</style>